<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    	
    <meta charset="utf-8">

    <!--	###########################################################Agregado######################################################	-->
    
    <meta charset= "utf-8">
	<title>Prueba Validator</title>
	<link rel="stylesheet" href="css/screen.css">
	<script src="lib/jquery.js"></script>
	<script src="dist/jquery.validate.js"></script>


	<script>
	
		$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
		});
		
		$(function() {
				
				//esto es una prueba
				// validate the comment form when it is submitted
				$("#form1").validate({
					rules: 
							{
								nombre:
										{
											required:true,
											minlength:4
										 },  
								apellidos: 
										{
											required:true,
											minlength:4
										},  
								email: 
										{
											required:true,
											minlength:3
										},  
								password: 
										{
											required:true,
											minlength:3
										}
							},
					messages: 
							{
								apellidos: 
								{
									required: "Debe ingresar su apellido",
									minlength: "Debe poseer al menos 4 caracteres"
									
								},
								nombre: 
								{
									required: "Ingrese su nombre",
									minlength: "Debe poseer al menos 4caracteres"
								},
								email: 
								{
									required: "Ingrese su email",
									minlength: "Debe poseer al menos 2 caracteres",
									email: "Debe ingresar un email valido, ejemplo@"
								},
								password: 
								{
									required: "Ingrese su clave",
									minlength: "Debe poseer al menos 2 caracteres"
								}
							}
				}); // Fin del Validate "form"
						 
			}); //fin del funcion de Validacion
			
	</script>




            <style type="text/css">
				h1 { text-align: center; }
				td { padding: 0.2em 2em ; }
				input { width:100px;}
				label{	margin-left:50px;}
				#boton input{ width:160px;}
				#contenedorFormulario{margin:15px; margin-left:200px; margin-right:150px;}
				#lineaFormulario{padding:10px;}
				.datosPersonales{width:230px;}
				} 
            </style>

</head>
<body>
			
            
            
            <img src="imagenes/banner.png" width="1361" />
             <div id="contenedorFormulario">
              <fieldset id="lineaFormulario">
                    <h1>Suscripción electronica a nuestro boletín.</h1>
                    <p>Censo de poblacion del estado <em><strong>Lara</strong></em></p>
                   <form id="form1" method="post" >
                     <table>
                           	<tr>
                                    <td class="datosPersonales">
                                        <label for="nombre" >Nombre:</label> <input  type="text" name="nombre"/>  <br/> 
                                     </td>
                                     <td class="datosPersonales">
                                        <label for="apellidos" >Apellidos:</label> <input type="text" name="apellidos" />   
                                     </td> 
                            </tr>
                            <tr>
                                     <td class="datosPersonales"> 
                                        <label for="email" >E-mail:</label> <input type="email" name="email" />
                                     </td>
                                     <td class="datosPersonales">
                                    
                                        <label for="password" >Contraseña:</label> <input  type="password" name="password"/>
										  
                                    <td>
                           <tr>
                        </table>   
                            <fieldset>
                            <table>
                               <tr>
                                   <td>
                                    
                                            <b>sexo</b><br/>
                                            <input type="radio" name="sexo" value="V"/> Varón<br/>
                                            <input type="radio" name="sexo" value="M"/> Mujer</p>
                                    
                                   </td>
                                   <td>
                                            <b>Nivel de estudios</b><br/>
                                            <input type="radio" name="estudios" value="elemental" checked="checked">
                                             Certificado escolar<br/>
                                            <input type="radio" name="estudios" value="basico"/> 
                                             Graduado en E.S.O.<br/>
                                            <input type="radio" name="estudios" value="bachiller"/> 
                                             Bachiller - Formación Profesional <br/>
                                            <input type="radio" name="estudios" value="Diplomado"/> 
                                             Diplomado<br/>
                                            <input type="radio" name="estudios" value="licenciado"/> 
                                             Licenciado o Doctorado<br/>
                                            </td>
                                   <td>
                                            <b>Interesado en los siguientes temas:</b> <br/>
                                            <input type="checkbox" name="musica"/> Música<br/>
                                            <input type="checkbox" name="deportes"/> Deportes<br/>
                                            <input type="checkbox" name="cine"/> Cine<br/>
                                            <input type="checkbox" name="libros"/> Libros<br/>
                                            <input type="checkbox" name="ciencia"/> Ciencia</p>
                                   </td>
                               </tr>
                              
                            </table>
                             </fieldset>
                            
                            <br/><b>Día de la semana que le interesa recibirlo:</b><br/>
                            
                            <select name="dia">
                                <option>día de la semana:</option> 
                                <option value="">lunes</option> 
                                <option value="Martes">martes</option> 
                                <option value="Miércoles">miercoles</option> 
                                <option value="Jueves">jueves</option> 
                                <option value="Viernes">viernes</option> 
                                <option value="Sábado">sábado</option> 
                                <option value="Domingo">domingo</option> 
                            </select>
                            </p>
                            <div id="boton">
                                    <p>Su opinión: <br/>
                                    <textarea name="comentario" rows="5" cols="50">Comentario: </textarea>
                                    <p><input type="submit" value="Comprobar el formulario"> 
                                       <input type="reset" value="borrar todo"></p>
                            </div>
                   </form>
            	</fieldset>
           </div>
           
</body>
</html>